<template>
    <view :class="'custom-class zan-capsule zan-capsule--' + type">
        <block v-if="color">
            <view class="zan-capsule__left" :style="'background: ' + color + '; border-color: ' + color">{{ leftText }}</view>
            <view class="zan-capsule__right" :style="'color: ' + color + '; border-color: ' + color">{{ rightText }}</view>
        </block>
        <block v-else>
            <view class="zan-capsule__left">{{ leftText }}</view>
            <view class="zan-capsule__right">{{ rightText }}</view>
        </block>
    </view>
</template>

<script>
'use strict';
export default {
    data() {
        return {};
    },
    externalClasses: ['custom-class'],
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        // 颜色状态
        type: {
            type: String,
            default: ''
        },
        // 自定义颜色
        color: {
            type: String,
            default: ''
        },
        // 左侧内容
        leftText: {
            type: String,
            default: ''
        },
        // 右侧内容
        rightText: {
            type: String,
            default: ''
        }
    },
    methods: {},
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
